import Page from "@/components/page"
import React, { useEffect, useMemo, useState } from "react"
import { Picker, View, Text } from "@tarojs/components"
import ExportFilter from "./exportFilter"
import ExportHistory from "./exportHistory"
import account from "@/store/account"
import { accountType } from "@/types"
import { observer } from "mobx-react"
import PageNav from "@/components/pageNav"

import "./index.scss"
const ExportPage: React.FC = observer(() => {

    const [showType, setShowType] = useState<'export' | 'history'>('export')
    const [curAccount, setCurAccount] = useState<accountType>()

    const switchShowType = () => {
        const type = showType === 'export' ? 'history' : 'export'
        setShowType(type)
    }

    useEffect(() => {
        setCurAccount(account.activeAccount)
    }, [account.activeAccount])

    const accountChange = (e) => {
        const index = e.detail.value
        setCurAccount(account.accountList[index])
    }

    const accountIndex = useMemo(() => {   
        return (account.accountList || []).findIndex(item => {
            return item.id === curAccount?.id
        })
    }, [account.accountList, curAccount])

    return (
        <Page className="export-page text-main-color flex-column page-background">
            <PageNav showBack className="report-page-header need-filter">导出账单</PageNav>
            <View className="page-content-card card-background flex-column flex-item">
                <View className="type-switch font-size28 flex-row flex-item text-main-color">
                    <View onClick={switchShowType} className={`type-item ${showType === 'export' ? 'active' : ''}`}>
                        <View className="type-name">账单导出</View>
                        <View className="bottom-line bg-contrast-color"></View>
                    </View>
                    <View onClick={switchShowType} className={`type-item ${showType === 'history' ? 'active' : ''}`}>
                        <View className="type-name">导出记录</View>
                        <View className="bottom-line bg-contrast-color"></View>
                    </View>
                    <View className="flex1"></View>
                    <Picker
                        className='item-val'
                        range={account.accountList}
                        value={accountIndex}
                        range-key='name'
                        onChange={accountChange}
                    >
                        <View className="flex1 account-name right-content text-main-color">
                            <Text>{curAccount?.name}</Text>
                            <Text className="iconfont icon-base-down"></Text>
                        </View>
                    </Picker>
                </View>
                {
                    showType === 'export' ?
                        <ExportFilter account={curAccount} onSuccess={switchShowType}></ExportFilter> :
                        <ExportHistory account={curAccount}></ExportHistory>
                }
            </View>
        </Page>
    )
})

export default ExportPage